<!-- 
  文件预览组件
 -->
<script setup lang="ts">
	import { inject, computed, watch, ref } from 'vue'
	import type { Log } from '@/env.d'
	import { cosPath, toFileUrl } from '@/utils/cos'

	// 从父组件拿到log，主要是获取userId
	const log : Log = inject('log')!

	/**
	 * 文件列表，没传就用log.files
	 */
	const props = defineProps<{ files ?: string[] }>()
	// 计算从哪里取属性
	const files = computed(() => props.files || log.files)

	// 传入的图片要处理，如果不是http开头，那么就加上OOS地址，否则直接用，而且要改为https
	const fileUrls = ref<string[]>(toFileUrl(files.value, 'files/', log.userid))

	watch(files, () => {
		fileUrls.value = toFileUrl(files.value, 'files/', log.userid)
	})

	// 下载文件
	const download = (file : string) => {
		const key = cosPath(log.userid) + 'files/' + file
		// console.log(key)
		// myGetObjectUrl(key)
	}
</script>

<template>
	<view class="viewer-files" @click.stop>
		<view v-for="(fileUrl, index) in fileUrls" :key="fileUrl" class="file">
			<up-icon name="file-text"></up-icon>
			<view class="name -overflow-ellipsis-s">{{ files[index] }}</view>
			<up-icon name="download" @click="download(files[index])"></up-icon>
		</view>
	</view>
</template>

<style scoped lang="scss">
	.viewer-files {
		width: 100%;
		
		display: flex;
		flex-direction: column;
		gap: 12rpx;

		.file {
			// border-radius: 1px solid blue;
			background-color: #dddd;
			border-radius: 12rpx;
			padding: 8rpx;
			
			display: flex;
			flex-direction: row;
			gap: 8rpx;
			
			.name {
				flex: 1;
			}
		}
	}
</style>